<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>罗盘时钟</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      width: 100%;
      height: 100%;
      background-color: #000;
      overflow: hidden;
    }
    #clock {
      position: relative;
      width: 100%;
      height: 100%;
      background: #000;
    }
    .label {
      display: inline-block;
      color: #4d4d4d;
      text-align: center;
      padding: 0 5px;
      font-size: 19px;
      transition: left 1s, top 1s;
      transform-origin: 0% 0%;
    }
  </style>
</head>
<body>
<div id="clock"></div>
<script>
  const monthText = [
    '一月',
    '二月',
    '三月',
    '四月',
    '五月',
    '六月',
    '七月',
    '八月',
    '九月',
    '十月',
    '十一月',
    '十二月',
  ];
  const dayText = [
    '一号',
    '二号',
    '三号',
    '四号',
    '五号',
    '六号',
    '七号',
    '八号',
    '九号',
    '十号',
    '十一号',
    '十二号',
    '十三号',
    '十四号',
    '十五号',
    '十六号',
    '十七号',
    '十八号',
    '十九号',
    '二十号',
    '二十一号',
    '二十二号',
    '二十三号',
    '二十四号',
    '二十五号',
    '二十六号',
    '二十七号',
    '二十八号',
    '二十九号',
    '三十号',
    '三十一号',
  ];
  const weekText = [
    '星期日',
    '星期一',
    '星期二',
    '星期三',
    '星期四',
    '星期五',
    '星期六',
  ];
  const hourText = [
    '零点',
    '一点',
    '两点',
    '三点',
    '四点',
    '五点',
    '六点',
    '七点',
    '八点',
    '九点',
    '十点',
    '十一点',
    '十二点',
    '十三点',
    '十四点',
    '十五点',
    '十六点',
    '十七点',
    '十八点',
    '十九点',
    '二十点',
    '二十一点',
    '二十二点',
    '二十三点',
  ];
  const minuteText = [
    '零分',
    '一分',
    '二分',
    '三分',
    '四分',
    '五分',
    '六分',
    '七分',
    '八分',
    '九分',
    '十分',
    '十一分',
    '十二分',
    '十三分',
    '十四分',
    '十五分',
    '十六分',
    '十七分',
    '十八分',
    '十九分',
    '二十分',
    '二十一分',
    '二十二分',
    '二十三分',
    '二十四分',
    '二十五分',
    '二十六分',
    '二十七分',
    '二十八分',
    '二十九分',
    '三十分',
    '三十一分',
    '三十二分',
    '三十三分',
    '三十四分',
    '三十五分',
    '三十六分',
    '三十七分',
    '三十八分',
    '三十九分',
    '四十分',
    '四十一分',
    '四十二分',
    '四十三分',
    '四十四分',
    '四十五分',
    '四十六分',
    '四十七分',
    '四十八分',
    '四十九分',
    '五十分',
    '五十一分',
    '五十二分',
    '五十三分',
    '五十四分',
    '五十五分',
    '五十六分',
    '五十七分',
    '五十八分',
    '五十九分',
  ];
  const secondsText = [
    '零秒',
    '一秒',
    '二秒',
    '三秒',
    '四秒',
    '五秒',
    '六秒',
    '七秒',
    '八秒',
    '九秒',
    '十秒',
    '十一秒',
    '十二秒',
    '十三秒',
    '十四秒',
    '十五秒',
    '十六秒',
    '十七秒',
    '十八秒',
    '十九秒',
    '二十秒',
    '二十一秒',
    '二十二秒',
    '二十三秒',
    '二十四秒',
    '二十五秒',
    '二十六秒',
    '二十七秒',
    '二十八秒',
    '二十九秒',
    '三十秒',
    '三十一秒',
    '三十二秒',
    '三十三秒',
    '三十四秒',
    '三十五秒',
    '三十六秒',
    '三十七秒',
    '三十八秒',
    '三十九秒',
    '四十秒',
    '四十一秒',
    '四十二秒',
    '四十三秒',
    '四十四秒',
    '四十五秒',
    '四十六秒',
    '四十七秒',
    '四十八秒',
    '四十九秒',
    '五十秒',
    '五十一秒',
    '五十二秒',
    '五十三秒',
    '五十四秒',
    '五十五秒',
    '五十六秒',
    '五十七秒',
    '五十八秒',
    '五十九秒',
  ];
  var clock;
  var monthList = [];
  var dayList = [];
  var weekList = [];
  var hourList = [];
  var minuteList = [];
  var secondsList = [];
  var isCircle = false;
  var textSet = [
    [monthText, monthList],
    [dayText, dayList],
    [weekText, weekList],
    [hourText, hourList],
    [minuteText, minuteList],
    [secondsText, secondsList],
  ];
  window.onload = function () {
    init();
    setInterval(function () {
      runTime();
    }, 100);
    changePosition();
    setTimeout(function () {
      changeCircle();
    }, 2000);
  };
  function init() {
    clock = document.getElementById('clock');
    for (var i = 0; i < textSet.length; i++) {
      for (var j = 0; j < textSet[i][0].length; j++) {
        var temp = createLabel(textSet[i][0][j]);
        clock.appendChild(temp);
        textSet[i][1].push(temp);
      }
    }
  }
  function createLabel(text) {
    var div = document.createElement('div');
    div.classList.add('label');
    div.innerText = text;
    return div;
  }
  function runTime() {
    var now = new Date();
    var month = now.getMonth();
    var day = now.getDate();
    var week = now.getDay();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var seconds = now.getSeconds();
    initStyle();
    var nowValue = [month, day - 1, week, hour, minute, seconds];
    for (var i = 0; i < nowValue.length; i++) {
      var num = nowValue[i];
      textSet[i][1][num].style.color = '#fff';
    }
    if (isCircle) {
      var widthMid = document.body.clientWidth / 2;
      var heightMid = document.body.clientHeight / 2;
      for (var i = 0; i < textSet.length; i++) {
        for (var j = 0; j < textSet[i][0].length; j++) {
          var r = (i + 1) * 35 + 50 * i;
          var deg = (360 / textSet[i][1].length) * (j - nowValue[i]);
          var x = r * Math.sin((deg * Math.PI) / 180) + widthMid;
          var y = heightMid - r * Math.cos((deg * Math.PI) / 180);
          var temp = textSet[i][1][j];
          temp.style.transform = 'rotate(' + (-90 + deg) + 'deg)';
          temp.style.left = x + 'px';
          temp.style.top = y + 'px';
        }
      }
    }
  }
  function initStyle() {
    var label = document.getElementsByClassName('label');
    for (var i = 0; i < label.length; i++) {
      label[i].style.color = '#4d4d4d';
    }
  }
  function changePosition() {
    for (let i = 0; i < textSet.length; i++) {
      for (let j = 0; j < textSet[i][1].length; j++) {
        let tempX = textSet[i][1][j].offsetLeft + 'px';
        let tempY = textSet[i][1][j].offsetTop + 'px';
        setTimeout(function () {
          textSet[i][1][j].style.position = 'absolute';
          textSet[i][1][j].style.left = tempX;
          textSet[i][1][j].style.top = tempY;
        }, 50);
      }
    }
  }
  function changeCircle() {
    isCircle = true;
    clock.style.transform = 'rotate(90deg)';
  }
</script>
</body>
</html>